<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="60">
        <el-form-item
          clearable
          class="!w-[192px]"
          @keyup.enter="handleSeach"
          label="储位"
          prop="code"
        >
          <el-input
            v-noSpace
            clearable
            class="!w-[192px]"
            @keyup.enter="handleSeach"
            v-model="queryParams.code"
            placeholder="请输入储位"
          />
        </el-form-item>
        <el-form-item label="仓库" prop="warehouseName">
          <el-input
            v-noSpace
            clearable
            class="!w-[192px]"
            @keyup.enter="handleSeach"
            v-model="queryParams.warehouseName"
            placeholder="请输入仓库"
          />
        </el-form-item>
        <el-form-item label="状态" prop="used">
          <el-radio-group v-model="queryParams.used" @change="handleSeach">
            <el-radio-button :value="''">全部</el-radio-button>
            <el-radio-button :value="1">已占用</el-radio-button>
            <el-radio-button :value="0">未占用</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="handleSeach">查询</el-button>
          <el-button icon="refresh" @click="handleReset">重置</el-button>
          <el-button
            @click="downloadTable"
            type="success"
            class="!rounded-button whitespace-nowrap"
            v-hasPerm="'sys:storageReport:exp'"
          >
            <el-icon class="mr-1"><Download /></el-icon>
            导出报表
          </el-button>
          <el-button
            @click="HistoryClick"
            type="info"
            class="!rounded-button whitespace-nowrap"
            v-hasPerm="'sys:storageReport:down'"
          >
            <el-icon class="mr-1"><Document /></el-icon>
            历史报表下载
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="never">
      <el-table
        v-loading="loading"
        show-overflow-tooltip
        :tooltip-formatter="tableRowFormatter"
        :data="tableData"
      >
        <el-table-column prop="warehouseName" label="所属仓库" width="300" />
        <el-table-column prop="code" label="储位编号" width="300" sortable />
        <el-table-column label="是否占用" width="300">
          <template #default="scope">
            <el-tag :type="scope.row.used ? 'danger' : 'success'">
              {{ scope.row.used ? "已占用" : "未占用" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="basketDetails" label="储位明细">
          <template #default="scope">
            <div v-if="scope.row.basketDetails">
              <div class="hidden-overflow">
                <span
                  v-for="(item, index) in scope.row.basketDetails.split(',')"
                  :key="index"
                  class="el-tag"
                >
                  {{ item }}
                </span>
              </div>
            </div>
            <!-- <div v-if="scope.row.basketDetails">
              <div class="tag-container">
                <el-tooltip
                 
                  :content="item"
                  type="primary"
                  placement="top"
                >
                  <el-tag class="truncate-tag">
                    {{ item }}
                  </el-tag>
                </el-tooltip>
              </div>
            </div> -->

            <!-- <div class="whitespace-pre-line">{{ scope.row.details }}</div> -->
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleSeach"
      />
    </el-card>
    <!-- 历史报表下载弹窗 -->
    <el-dialog v-model="historyDialogVisible" title="历史报表下载" width="600px">
      <el-table :data="historyReports" style="width: 100%">
        <el-table-column prop="fileName" label="文件名称" min-width="200" />
        <el-table-column prop="createTime" label="创建时间" min-width="160" />
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <el-button @click="historyDownLoad(row.filePath, row.fileName)" type="primary" link>
              下载
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-model:total="peportTotal"
        v-model:page="reportParams.pageNum"
        v-model:limit="reportParams.pageSize"
        @pagination="reportHistoryList"
      />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { tableRowFormatter } from "@/utils/index";
import { FormItemRule } from "element-plus/es";
import configApi, { ConfigType } from "@/api/config/config";
import statementApi, { locationPageQuery } from "@/api/statement/statement";
import { downLoad, historyDownLoad } from "@/utils/downLoad";
import { useDateRanges } from "@/utils/useDateRanges";
const historyDialogVisible = ref(false);
const reportType = 1;
const reportName = "储位报表";
const historyReports = ref([]);
const peportTotal = ref(0);
const reportParams: locationPageQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  reportType: reportType,
});
const reportHistoryList = () => {
  statementApi
    .getReportHistory(reportParams)
    .then((data) => {
      console.log(data);
      historyReports.value = [...(data.list as never)];
      historyReports.value.forEach((item: any) => {
        item.fileName = reportName + "_" + useDateRanges().getDate() + ".xlsx";
      });
      peportTotal.value = data.total;
    })
    .finally(() => {});
};
const HistoryClick = async () => {
  historyDialogVisible.value = true;
  reportHistoryList();
};
//下载表格
const downloadTable = () => {
  downLoad(queryParams, reportType, reportName);
};
// 加载loading
const loading = ref(false);
// 分页总数
const total = ref(0);
// 搜索ref
const queryFormRef = ref(ElForm);
// 一级弹窗ref
const dialogFormRef = ref(ElForm);
//一级弹窗
const dialogVisible = reactive({ visible: false, title: "", type: "" });
//一级表单验证
const rules = reactive<Record<string, FormItemRule[]>>({
  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
  type: [{ required: true, message: "请输入类型", trigger: "blur" }],
});

const queryParams: locationPageQuery = reactive({
  pageNum: 1,
  pageSize: 10,
});
const contractList = ref<any[]>([]);
function getContractList() {
  configApi.getConfigListByType(ConfigType.WAREHOUSE_CODE).then((res) => {
    console.log(res);
    contractList.value = res;
  });
}
// 类型
const typeList = ref([
  { label: "干货", value: 0 },
  { label: "水产", value: 1 },
]);
//类型格式化
const typeFormat = (val: number) => {
  return typeList.value.find((item) => item.value == val)?.label;
};
// 列表参数
const tableData = ref([]);

// 查询方法
const handleSeach = () => {
  loading.value = true;

  statementApi
    .getLocationReport(queryParams)
    .then((data) => {
      console.log(data, "getLocationReport");
      tableData.value = [...(data?.list as never)];
      total.value = data.total;
      console.log(total.value);
    })
    .finally(() => {
      loading.value = false;
    });
};
// 重置方法
const handleReset = () => {
  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;

  handleSeach();
};

onMounted(() => {
  getContractList();
  handleSeach();
});
</script>

<style lang="scss" scoped>
@use "@/styles/css/public" as *;
.hidden-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 或 ellipsis */
  // width: 600px;
  // border: 1px solid #ccc; /* 可视化边界 */
  padding: 5px;
}
.hidden-overflow span {
  margin-right: 10px; /* 可选：调整 span 间距 */
  // background: #409eff;
  padding: 10px;
  color: #409eff;
}
</style>
